<template>
    <div>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
                        <el-breadcrumb-item>用户评论列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <div>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="用户名称 : ">
                            <el-input v-model="username" placeholder="请输入用户名称"></el-input>
                        </el-form-item>

                        <el-form-item label="宠物名称 : ">
                            <el-input v-model="pname" placeholder="请输入宠物名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click.prevent="searchComment">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

<!--                <el-col :span="4">-->
<!--                    <el-button type="primary" @click="addDialogVisible=true">添加评论</el-button>-->
<!--                </el-col>-->

            </el-row>
            <el-table :data="CommentList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="用户id" prop="userId"></el-table-column>
                <el-table-column label="用户名称" prop="userName"></el-table-column>
                <el-table-column label="宠物id" prop="petId"></el-table-column>
                <el-table-column label="宠物名称" prop="petName"></el-table-column>
                <el-table-column label="用户评论" prop="message"></el-table-column>
                <el-table-column label="回复评论" prop="answerUser"></el-table-column>
                <el-table-column label="评论时间" prop="insertTime"></el-table-column>
                <el-table-column label="更新时间" prop="updateTime"></el-table-column>


                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.del == '0'" style="color: #67C23A">正常</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" :width="'145px'">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row.id)">回复</el-button>
                        <el-button type="danger" size="mini" @click="removeCommentById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 6 , 12, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>


        <!--添加评论-->
<!--        <el-dialog title="添加评论" :visible.sync="addDialogVisible" width="50%" @close="addCommentFormClose">-->
<!--            <el-form-->
<!--                    :model="addCommentForm"-->
<!--                    :rules="addCommentFormRules"-->
<!--                    ref="addRSFormRef"-->
<!--                    label-width="100px"-->
<!--                    class="demo-ruleForm"-->
<!--            >-->
<!--                <el-form-item label="救助站名称" prop="name">-->
<!--                    <el-input v-model="addCommentForm.name"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="电话" prop="telephone">-->
<!--                    <el-input v-model="addCommentForm.telephone"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="地址" prop="address">-->
<!--                    <el-input v-model="addCommentForm.address"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="邮箱" prop="email">-->
<!--                    <el-input v-model="addCommentForm.email"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="简介" prop="introduce">-->
<!--                    <el-input v-model="addCommentForm.introduce"></el-input>-->
<!--                </el-form-item>-->

<!--            </el-form>-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button type="primary" @click="addComment('addCommentFormRef')">确 定</el-button>-->
<!--                <el-button @click="cancelAddComment">取 消</el-button>-->
<!--            </span>-->
<!--        </el-dialog>-->


        <!--修改用戶-->
        <el-dialog
                title="回复评论"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editCommentFormClose"
        >
            <el-form
                    :model="editCommentForm"
                    :rules="editCommentFormRules"
                    ref="editCommentFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="" prop="id">
                    <el-input v-model="editCommentForm.id" v-show="false"></el-input>
                </el-form-item>
                <el-form-item label="用户ID" prop="userId">
                    <el-input v-model="editCommentForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="userName">
                    <el-input v-model="editCommentForm.userName" disabled></el-input>
                </el-form-item>
                <el-form-item label="宠物ID" prop="petId">
                    <el-input v-model="editCommentForm.petId" disabled></el-input>
                </el-form-item>
                <el-form-item label="宠物名称" prop="petName">
                    <el-input v-model="editCommentForm.petName" disabled></el-input>
                </el-form-item>
                <el-form-item label="回复评论" prop="answerUser">
                    <el-input v-model="editCommentForm.answerUser"></el-input>
                </el-form-item>
                <el-form-item label="评论" prop="message">
                    <el-input v-model="editCommentForm.message" disabled></el-input>
                </el-form-item>

                <el-form-item label="是否删除此评论" prop="del">
                    <el-select v-model="editCommentForm.del" placeholder="请选择是否删除当前评论">
                        <el-option label="否" :value="0"></el-option>
                        <el-option label="是" :value="-1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editComment('editCommentFormRef')">确 定</el-button>
        <el-button @click="resetEditForm">取 消</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {

            editDialogVisible: false,
            swflag: false,
            pageNum: 1,
            pageSize: 3,
            CommentList: [],
            total: 9,
            username: "",
            pname: "",
            addDialogVisible: false,
            // addCommentForm: {
            //     name: "",
            //     telephone: "",
            //     address: "",
            //     email: "",
            //     introduce: ""
            // },
            editCommentForm: {
                id: "",
                userId:"",
                userName: "",
                petName: "",
                petId: "",
                message: "",
                answerUser: "",
                del:""
            },
            editCommentFormRules: {
                name: [
                    {required: true, message: "請輸入名称", trigger: "blur"},
                    {min: 1, max: 20, message: "名称必须是1-20个字符", trigger: "blur"}
                ],
                telephone: [
                    {required: true, message: "請輸入联系方式", trigger: "blur"},
                    // 数字验证问题还未解决
                    {min: 11, max: 11, message: "名称必须是11符", trigger: "blur"}
                ],
                address: [
                    {required: true, message: "請輸入地址", trigger: "blur"},
                    {min: 1, max: 40, message: "地址不能为空", trigger: "blur"}
                ],
                email: [
                    {required: true, message: '邮箱不能为空', trigger: 'blur'},
                    {
                        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: '必须符合邮箱格式',
                        trigger: 'blur'
                    }
                ],
                del: [{required: true, message: "请选择救助站状态", trigger: "blur"}]
            },
            addCommentFormRules: {
                name: [
                    {required: true, message: "請輸入名称", trigger: "blur"},
                    {min: 1, max: 20, message: "名称必须是1-20个字符", trigger: "blur"}
                ],
                telephone: [
                    {required: true, message: "請輸入联系方式", trigger: "blur"},
                    // 数字验证问题还未解决
                    {min: 11, max: 11, message: "名称必须是11符", trigger: "blur"}
                ],
                address: [
                    {required: true, message: "請輸入地址", trigger: "blur"},
                    {min: 1, max: 40, message: "地址不能为空", trigger: "blur"}
                ],
                email: [
                    {required: true, message: '邮箱不能为空', trigger: 'blur'},
                    {
                        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: '必须符合邮箱格式',
                        trigger: 'blur'
                    }
                ]
            }


        };

    },
    methods: {
        async removeCommentById(id) {
            console.log(id + "****************");
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = "/comment/del/" + id;
                this.$axios.delete(url).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        this.initComment();
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg,
                            duration: 3000
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        showEditDialog(id) {
            let url = "/comment/getCommentByKey/" + id;
            this.$axios.get(url).then(res => {
                if (res.data.code == 200) {
                    this.editCommentForm = res.data.data;
                    this.editDialogVisible = true;
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                        duration: 1000
                    })
                }
            })
        },
        editCommentFormClose() {
            this.$refs.editCommentFormRef.resetFields();
        },
        editComment(bbb) {
            this.$refs[bbb].validate((valid) => {  //开启校验
                if (valid) {   // 如果校验通过，请求接口，允许提交表单
                    let url = "/comment/modify";
                    console.log(this.editCommentForm)
                    this.$axios.put(url, this.editCommentForm)
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: res.data.msg,
                                    duration: 1000
                                })
                                this.editDialogVisible = false;
                                this.initComment();
                                // this.initRole();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg,
                                    duration: 1000
                                })
                            }
                        })
                } else {   //校验不通过
                    return false;
                }
            });
        },
        resetEditForm() {
            this.$refs.editCommentFormRef.resetFields();//重置恢复之前的数据
            this.initComment();
            this.editDialogVisible = false;
        },
        addComment(aaa) {
            this.$refs[aaa].validate((valid) => {  //开启校验
                if (valid) {   // 如果校验通过，请求接口，允许提交表单
                    let url = "/commenr/addComment";
                    console.log(this.addRSForm)
                    this.$axios.post(url, this.addRSForm)
                        .then(res => {
                            if (res.data.code == 200) {
                                this.initComment();
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                                this.addDialogVisible = false;
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg,
                                    duration: 1000
                                })
                            }
                        })
                } else {   //校验不通过
                    return false;
                }
            });

        },

        //关闭管理员的对话框
        addCommentFormClose() {
            this.addDialogVisible = false;
            this.$refs.addCommentFormRef.resetFields();
        },
        //取消添加管理员
        cancelAddComment() {
            this.addDialogVisible = false;
            this.$refs.addCommentFormRef.resetFields();
        },


        searchComment() {
            this.pageNum = 1;
            this.initComment();
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.pageNum = 1;
            this.initComment();
        },
        handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.initComment();
        },
        //初始化查询 用户信息
        initComment() {
            let url = "/comment/listComment";
            this.$axios.get(url, {
                params: {
                    now: this.pageNum,
                    size: this.pageSize,
                    uname: this.username,
                    pname: this.pname
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.CommentList = res.data.data.list;
                    this.pageSize = res.data.data.pageSize;
                    this.pageNum = res.data.data.pageNum;
                    this.total = res.data.data.total;
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                        duration: 1000
                    })
                }
            })
        }

    },
    created() {
        this.initComment();
    }

}
</script>

<style scoped>

</style>